<template>
  <el-card :bordered="false" class="addOrder">
    <el-page-header @back="$router.go(-1)" style="margin-bottom:10px"></el-page-header>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :labelWidth="labelWidth"
      class="demo-ruleForm"
    >
      <!-- 基本信息 -->
      <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false">
        <span slot="title">基本信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="24">
            <el-form-item label="出库编号：">{{form.outStockId}}</el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="出库类型：">退货出库</el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="供应商：">{{form.supplyName}}</el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="出库日期：" prop="outStockTime">
              <el-date-picker
                v-model="ruleForm.outStockTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd 00:00:00"
                style="width:30%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="备注：">
              <el-input
                v-model="ruleForm.remarks"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6}"
                placeholder="请填写备注，不超过1500个字"
                maxlength="1500"
                show-word-limit
                style="width:30%"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="出库凭证：" prop="inStockCert" ref="lmtbUpload">
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="true"
                :before-upload="beforeUpload"
                :on-change="handleChange"
                :file-list="fileList"
                :limit="1"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="tip" class="el-upload__tip">建议上传大小不超过1M，尺寸为 326*412 的图片</div>
                <div slot="file" slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span class="el-upload-list__item-delete" @click="delUplod(file)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisibleImg">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
              <!-- modal -->
              <cropper-modal
                ref="cropperModal"
                :optionsData="optionsData"
                @ok="handleCropperSuccess"
              ></cropper-modal>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <el-card class="box-card" shadow="never" style="margin-bottom: 20px;">
        <div slot="header" class="clearfix">
          <h3>商品明细</h3>
        </div>
        <buyingIfor
          ref="buyingIfor"
          :loadData="form.goods"
          style="margin-bottom:20px"
        />
      </el-card>
      <div class="content">
        <el-button type="primary" @click="submitSave('ruleForm')" :loading="loadingSure">确认出库</el-button>
        <el-button @click="quxiao('ruleForm')">取消</el-button>
      </div>
    </el-form>
    <choiceShop ref="choiceShop" @trigger="trigger" />
  </el-card>
</template>

<script src='./index.js'></script>

<style lang="scss">
.addOrder {
  .content {
    text-align: center;
    margin: 20px 0px;
    button {
      margin-right: 10px;
    }
  }
}
</style>
